<template>
  <swiper class="tp-detail-images"
    :indicator-dots="false"
    :circular="true"
    :autoplay="true"
    interval="3000"
    duration="300"
    :style="{height: height + 'px'}">
    <swiper-item v-for="(img,idx) in images" :key="'detail-img-' + idx">
      <view class="tp-detail-img" 
        :style="{'background-image': 'url(' + img + ')', 'background-size':'100% auto','background-repeat': 'no-repeat','background-position': '0 0', height: height + 'px'}"
        @click="imageclick(img)"></view>
    </swiper-item>
  </swiper>
</template>

<script>
  export default {
    name:"tp-detail-images",
    emits: ['selected'],
    props: {
      height: {
        type: [String, Number],
        default: 300
      },
      images: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        
      };
    },
    methods: {
      imageclick(img) {
        this.$emit('selected', img)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  @keyframes imgmove {
    0% {
      background-size: 100%;
    }
    100% {
      background-size: 120%;
    }
  }
  .tp-detail-img {
    //animation: imgmove 5s infinite;
    background-position: center;
    background-clip:content-box;
    background-size: 100%;
    width: 100%;
    overflow: hidden;
    color: #fff;
  }
</style>